<template>
	<div class="">
		<!--<base-header></base-header>-->
		<div class="put-title mt10">
			<span>姓名：</span>
			<input v-model="name" class="" type="text" placeholder="请输入姓名" />
		</div>
		<div class="put-title">
			<span>邮箱：</span>
			<input v-model="email" class="" type="email" placeholder="请输入邮箱" />
		</div>
		<div class="put-title">
			<span>生日：</span>
			<input v-model="birthday" id="birthday" class="" type="text" placeholder="请输入生日" />
		</div>
		<div class="put-title">
			<span>性别：</span>
			<div class="">
				<input v-model="sex" type="radio" name="sex" id="sex" value="1" :required="sex == '1'" />
				<span style="margin-right: 10px;">男</span>
				<input v-model="sex" type="radio" name="sex" id="sex" value="2" :required="sex == '2'" />
				<span>女</span>
			</div>
		</div>
		<div @click="save" class="put-title text-center">
			<span style="flex: 1;">保存</span>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import mobiscroll from "../../../static/Mobiscroll/js/mobiscroll.custom-3.0.0-beta6.min.js"
	export default {
		name: 'PutQuestion',
		components: {
			BaseHeader
		},
		data() {
			return {
				uid: '',
				token: '',
				name: '',
				email: '',
				birthday: '',
				sex: ''
			}
		},
		mounted() {
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			this.getUser();
			var self = this;
			$('#birthday').mobiscroll().date({
				theme: 'mobiscroll',
				lang: 'zh',
				display: 'bottom',
				onClose: function(textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
					self.birthday = textVale.valueText;
				}
			});
		},
		methods: {
			//用户信息
			getUser() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token
				};
				$.post(global.domain + global.API.user_show, data, function(msg) {
					if(msg.error == 0) {
						self.name = msg.data.name;
						self.email = msg.data.email;
						self.birthday = msg.data.birthday;
						self.sex = msg.data.sex;
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//
			save() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token,
					name: self.name,
					sex: self.sex,
					email: self.email,
					birthday: self.birthday
				};
				$.post(global.domain + global.API.user_update, data, function(msg) {
					if(msg.error == 0) {
						self.$router.back(-1);
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.put-title {
		width: 100%;
		padding: 15px;
		background-color: #fff;
		border: none;
		outline: none;
		color: #bbb;
		display: flex;
	}
	
	.put-title {
		margin-bottom: 10px;
	}
	
	.put-title input {
		flex: 1;
		border: none;
		outline: none;
	}
	
	.mt10 {
		margin-top: 10px;
	}
</style>